import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { Divider, Space, Switch, Textarea } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';
import CommonAttributeComponent from '../common-attribute-component';
import CommonSettingButtons from '../common-setting-buttons';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
      required: true,
    },
    language: {
      type: String as PropType<LanguageTypeString>,
      required: true,
    },
  },
  setup(props) {
    const { language, question } = props;
    const questionProper =
      language === 'zh' ? question.questionProperZh : question.questionProperEn;
    const scaleItems = ref('');
    questionProper?.items?.forEach(eachItem => {
      if (eachItem.value !== -1) {
        scaleItems.value = scaleItems.value + eachItem.title + '\n';
      }
    });
    scaleItems.value = scaleItems.value.substring(0, scaleItems.value.length - 1);

    const hasIndividual = ref(questionProper?.hasIndividual);

    const scaleItemsChange = () => {
      let newScaleItems: any[] = [];
      scaleItems.value.split('\n').forEach(eachItem => {
        if (eachItem.trim()) {
          newScaleItems.push(eachItem.trim());
        }
      });

      if (questionProper?.items && questionProper.items.length > 0) {
        const itemLength = questionProper?.items?.length;
        if (hasIndividual.value) {
          questionProper.items.splice(0, itemLength - 1);
        } else {
          questionProper.items.splice(0, itemLength);
        }
      } else {
        questionProper!.items = new Array();
      }
      if (newScaleItems.length > 0) {
        newScaleItems = newScaleItems.reverse();
        newScaleItems.forEach((eachNewScaleItem, index) => {
          questionProper!.items?.unshift({
            title: eachNewScaleItem,
            value: newScaleItems.length - index,
            isDefault: false,
            isInput: false,
            isExclusion: false,
            disabled: false,
            isDesignAdd: true,
            isIndividual: false,
            isHovered: false,
          });
        });
      }
      if (questionProper?.items && questionProper.items.length > 0) {
        const idPrefix = Math.floor(Math.random() * 1000);
        questionProper?.items.forEach((eachItem, index) => {
          eachItem.id = idPrefix + '-' + (index + 1);
          if (!eachItem.isIndividual) {
            eachItem.value = index + 1;
          }
        });
      }
    };

    const individualSwitchChange = () => {
      questionProper!.hasIndividual = hasIndividual.value;
      if (questionProper?.hasIndividual) {
        questionProper.items?.push({
          title: language === 'zh' ? '不适用' : 'Not Applicable',
          value: -1,
          isDefault: false,
          isInput: false,
          isExclusion: false,
          disabled: false,
          isDesignAdd: true,
          isIndividual: true,
          isHovered: false,
        });
      } else {
        const lastIndex = questionProper?.items?.length;
        if (lastIndex) {
          questionProper.items?.splice(lastIndex - 1, 1);
        }
      }
    };
    return () => {
      return (
        <>
          <CommonAttributeComponent question={question} language={language} />
          <Divider plain={true}>量表题选项</Divider>

          <div class="map-attribute-design-item-container">
            <Textarea
              v-model:value={scaleItems.value}
              style="height:200px"
              onChange={scaleItemsChange}
            ></Textarea>
          </div>
          <div class="map-attribute-design-item-container">
            <label>
              显示独立选项:
              <Switch
                style="margin-left:8px"
                v-model:checked={hasIndividual.value}
                onChange={individualSwitchChange}
              />
            </label>
          </div>
          <div style="text-align:center">
            <Space>
              <CommonSettingButtons question={question} language={language} />
            </Space>
          </div>
        </>
      );
    };
  },
});
